<template>
  <page-container title="入款/入料" :showBack="true">
    <template v-slot:nav-left>
      <view class="nav-left" @click="goBack">
        <uni-icons type="left" size="20" color="#d4af37"></uni-icons>
      </view>
    </template>
    <view class="deposit-container" :class="{ 'keyboard-active': isKeyboardShow }">
      <!-- 入款/入料标签页 -->
      <view class="tab-section-deposit">
        <view class="tab-container">
          <view class="tab-item" :class="{ active: activeTab === 'deposit' }" @click="switchTab('deposit')">
            <text class="tab-text">入款</text>
          </view>
          <view class="tab-item" :class="{ active: activeTab === 'material' }" @click="switchTab('material')">
            <text class="tab-text">入料</text>
          </view>
        </view>
        <!-- <view class="pre-deposit-info" v-if="activeTab === 'deposit'">
          <text class="pre-deposit-text">预追加定金 ¥0</text>
        </view> -->
      </view>

      <!-- 入款页面 -->
      <view class="tab-content" v-if="activeTab === 'deposit'">
        <!-- 金额输入区域 -->
        <view class="amount-section">
          <view class="amount-input-container">
            <text class="currency-symbol">¥</text>
            <input class="amount-input" v-model="depositAmount" type="number" @input="onAmountInput" placeholder="请输入金额" placeholder-style="color: #d4af37;"/>
          </view>
          <!-- 入款提示 -->
          <view class="deposit-tip">
            <text class="tip-text">入款单次不超过：1百万元</text>
          </view>
        </view>

        <!-- 平台账户信息 -->
        <view class="account-section">
          <view class="account-header">
            <view class="header">
              <text class="section-title">平台账户信息</text>
            </view>
            <view class="collapse-btn" @click="toggleCollapse">
              <text class="collapse-text">收起</text>
              <image class="collapse-arrow" :class="{ collapsed: isCollapsed }" src="/static/index/arrow-down.png"
                mode="widthFix"></image>
            </view>
          </view>
          <view class="account-info" v-if="!isCollapsed">
            <view class="account-item" v-for="(item, index) in platformBank" :key="index">
              <view class="account-details">
                <text class="account-text bank-acc">{{ item.bankAcc }}</text>
                <text class="account-text account-bank-name">{{ item.bankName }}</text>
                <text class="account-text account-bank-card-no">{{ item.bankCardNo }}</text>
              </view>
              <view class="account-actions">
                <view class="action-btn copy-btn" @click="copyAccount(item)">
                  <text class="action-text">复制</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 选择银行卡 -->
        <view class="bank-section">
          <view class="section-header">
            <text class="section-title">选择银行卡</text>
            <view class="add-bank-card" @click="addBankCard">
              <uni-icons type="plusempty" size="18" color="#ffffff"></uni-icons>
            </view>
          </view>
          <scroll-view class="bank-card-container" scroll-x="true" show-scrollbar="false">
            <view class="bank-card" @click="selectBankCard(item)" v-for="(item, index) in bankCardList" :key="index">
              <view class="card-top">
                <view class="card-left">
                  <view class="bank-logo">
                    <text class="logo-text"></text>
                  </view>
                  <view class="bank-info">
                    <text class="bank-name">{{ item.bankName }}</text>
                    <text class="card-type">{{ item.cardType }}</text>
                  </view>
                </view>
                <view class="card-right">
                  <view class="card-checkbox" :class="{ checked: isCardSelected(item) }">
                    <text class="checkbox-text" v-if="isCardSelected(item)">
                      <uni-icons type="checkmark" size="16" color="#fff"></uni-icons>
                    </text>
                  </view>
                </view>
              </view>
              <view class="card-center">
                <view class="card-number">
                  <text class="last-digits">{{ item.bankCardNo }}</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>

        <!-- 上传凭证 -->
        <view class="upload-section">
          <view class="section-header">
            <text class="section-title">上传凭证 (上传图片大小不能超过5M，最多9张)</text>
          </view>
          <view class="upload-grid">
            <!-- 已上传的图片 -->
            <view class="voucher-item" v-for="(voucher, index) in uploadedVouchers" :key="index">
              <image class="voucher-image" :src="voucher" mode="aspectFill" @click="previewImage(index)"></image>
              <view class="voucher-delete" @click="deleteVoucher(index)">
                <text class="delete-icon">×</text>
              </view>
            </view>
            <!-- 上传按钮 -->
            <view class="upload-area" @click="uploadVoucher" v-if="uploadedVouchers.length < 9">
              <view class="upload-icon">
                <text class="icon-plus">+</text>
              </view>
              <text class="upload-text">上传凭证</text>
            </view>
          </view>
        </view>

        <!-- 营业时间 -->
        <view class="business-hours">
          <text class="hours-text">营业时间:上午09:30--凌晨02:00</text>
        </view>
      </view>

      <!-- 入料页面 -->
      <view class="tab-content" v-if="activeTab === 'material'">
        <view class="material-container">
          <!-- 入料克重 -->
          <view class="material-icon">
            <image src="/static/index/gold-bar.png" mode="widthFix"></image>
            <input class="amount-input material-input" v-model="materialWeight" type="number" @input="onMaterialPriceInput" placeholder="请输入克重" placeholder-style="color: #d4af37;"/>
          </view>

          <!-- 入料提示 -->
          <view class="material-tip">
            <text class="tip-text">入料克重、入料单价和入料总价只取小数点后两位</text>
            <view class="tip-text">入料克重最小1公斤,最大30公斤</view>
          </view>
        </view>

        <!-- 产品选择 -->
        <view class="product-section">
          <view class="form-item">
            <text class="form-label">产品</text>
            <view class="form-value" @click="selectProduct">
              <text class="value-text">{{ selectedProduct }}</text>
              <image class="value-arrow" src="/static/index/gray-right.png" mode="widthFix"></image>
            </view>
          </view>
          <!-- 入料单价 -->
          <!-- <view class="form-item">
            <text class="form-label">入料单价</text>
            <input class="form-input" v-model="materialPrice" placeholder="请输入入料单价" type="number" />
          </view> -->
          <!-- 参考价格 -->
          <view class="form-item">
            <text class="form-label">实时参考价格</text>
            <text class="total-value">{{ realTimePrice.price }}</text>
          </view>
          <!-- 入料总价 -->
          <view class="form-item">
            <text class="form-label">入料总价</text>
            <text class="total-value">{{ totalPrice }}</text>
          </view>
        </view>
        <!-- 上传凭证 -->
        <view class="upload-section">
          <view class="section-header">
            <text class="section-title">上传凭证 (上传图片大小不能超过5M，最多9张)</text>
          </view>
          <view class="upload-grid">
            <!-- 已上传的图片 -->
            <view class="voucher-item" v-for="(voucher, index) in uploadedVouchers" :key="index">
              <image class="voucher-image" :src="voucher" mode="aspectFill" @click="previewImage(index)"></image>
              <view class="voucher-delete" @click="deleteVoucher(index)">
                <text class="delete-icon">×</text>
              </view>
            </view>
            <!-- 上传按钮 -->
            <view class="upload-area" @click="uploadVoucher" v-if="uploadedVouchers.length < 9">
              <view class="upload-icon">
                <text class="icon-plus">+</text>
              </view>
              <text class="upload-text">上传凭证</text>
            </view>
          </view>
        </view>

        <!-- 营业时间 -->
        <view class="business-hours">
          <text class="hours-text">营业时间: 周一至周五上午10:00 -- 下午18:00</text>
        </view>
      </view>

      <!-- 底部提交按钮  :class="{ disabled: !canSubmit }"-->
      <view class="bottom-button" :class="{ 'keyboard-active': isKeyboardShow }" :style="{ paddingBottom: isKeyboardShow ? '20rpx' : '30rpx' }">
        <button class="submit-btn" @click="submitForm">
          <text class="submit-text">{{ activeTab === 'deposit' ? '入款' : '入料' }}</text>
        </button>
      </view>

    </view>
    <inConfirmDialog :visible="showConfirm" :orderInfo="confirmOrderInfo" @close="hideConfirmDialog"
      @cancel="hideConfirmDialog" @confirm="handleConfirmOrder" />
    <materialConfirmDialog :visible="showMaterialConfirm" :orderInfo="confirmOrderInfo"
      @close="hideMaterialConfirmDialog" @cancel="hideMaterialConfirmDialog" @confirm="handleConfirmMaterial" />
  </page-container>
</template>

<script>
import config from '@/config'
import { uploadToOss } from '@/utils/ossUpload'
import inConfirmDialog from './inConfirmDialog.vue'
import materialConfirmDialog from './materialConfirmDialog.vue'
export default {
  name: 'DepositInPage',
  components: {
    inConfirmDialog,
    materialConfirmDialog
  },
  data() {
    return {
      showConfirm: false,
      showMaterialConfirm: false,
      confirmOrderInfo: {},
      activeTab: 'deposit', // 默认显示入款页面
      depositAmount: '', // 入款金额
      materialPrice: '', // 入料单价
      selectedCard: false, // 是否选择银行卡
      isCollapsed: false, // 是否收起账户信息
      uploadedVouchers: [], // 上传的凭证数组
      selectedProduct: '黄金', // 选择的产品
      materialWeight: '', // 入料克重
      keyboardHeight: 0, // 键盘高度
      isKeyboardShow: false, // 键盘是否显示

      RECHARGE: 'RECHARGE', // 充值 deposit
      ENCASH: 'ENCASH', // 提现
      BUY: 'BUY', // 买料
      SELL: 'SELL', // 卖料
      SAVE: 'SAVE', // 入料 material
      TAKE: 'TAKE', // 提料
      platformBank: [], // 平台银行列表
      bankCardList: [], // 银行卡列表
      selectedBankCard: null, // 选择银行卡
      selectedCardIds: [], // 选中的银行卡ID数组
      accessoryGroupId: '', // 凭证组id
      realTimePrice: {
        type: 'GOLD',
        price: 0
      },
      accessoryGroupFileList: []
    }
  },
  computed: {
    // 计算入料总价
    totalPrice() {
      if (this.materialPrice && this.materialWeight) {
        const price = parseFloat(this.materialPrice) || 0
        const amount = parseFloat(this.materialWeight) || 0
        return (price * amount).toFixed(2)
      }
      return '0'
    },
    // 是否可以提交
    canSubmit() {
      if (this.activeTab === 'deposit') {
        return this.depositAmount && this.depositAmount > 0 && this.selectedBankCard
      } else {
        return this.materialPrice && this.materialWeight && this.materialPrice > 0 && this.materialWeight > 0
      }
    }
  },
  onUnload() {
    uni.$off('priceMessagesChanged');
    // 移除键盘事件监听
    uni.offKeyboardHeightChange();
  },
  onShow() {
    this.getBankCard()
  },
  onLoad(options) {
    this.getPlatformBank()
    this.getRealTimePrice()
    // 监听键盘高度变化
    this.initKeyboardListener()
  },
  methods: {
    // 初始化键盘监听
    initKeyboardListener() {
      // #ifdef APP-PLUS
      uni.onKeyboardHeightChange((res) => {
        this.keyboardHeight = res.height
        this.isKeyboardShow = res.height > 0
        console.log('键盘高度变化:', res.height)
      })
      // #endif
      
      // #ifdef MP-WEIXIN
      // 微信小程序使用页面生命周期监听
      // #endif
    },
    
    goBack() {
      setTimeout(() => {
        uni.navigateBack()
      }, 100)
    },
    getPlatformBank() {
      this.$http.get('/applet/customer/platformBank').then(res => {
        this.platformBank = res.data
      })
    },
    getRealTimePrice() {
      uni.$on('priceMessagesChanged', (newMsg) => {
        let type = this.selectedProduct === '黄金' ? 'GOLD' : 'SILVER'
        // console.log(222222, '入料参考价格:', newMsg.data.priceMap[type]);
        if (newMsg.data.priceMap[type]) {
          this.realTimePrice.type = type
          this.realTimePrice.price = newMsg.data.priceMap[type].price
          this.materialPrice = newMsg.data.priceMap[type].price
          this.realTimePrice.price = newMsg.data.priceMap[type].price
        }
      });
    },
    getBankCard() {
      this.$http.get('/applet/customer/bankCardList').then(res => {
        this.bankCardList = res.data
      })
    },
    // 添加银行卡
    addBankCard() {
      uni.navigateTo({
        url: '/pages/mine/bankCard/addCard'
      })
    },
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab
    },
    // 金额输入处理
    onAmountInput(e) {
      this.depositAmount = e.detail.value
    },
    // 切换收起状态
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed
    },
    // 复制账户信息
    copyAccount(item) {
      const accountInfo = `${item.bankCardNo}`
      uni.setClipboardData({
        data: accountInfo,
        success: () => {
          uni.showToast({
            title: '账户信息已复制',
            icon: 'success'
          })
        }
      })
    },
    // 选择银行卡
    selectBankCard(item) {
      this.confirmOrderInfo.bankCardNo = item.bankCardNo
      const cardId = item.id || item.bankCardId

      // 如果点击的是已选中的银行卡，则取消选择
      if (this.selectedBankCard && this.selectedBankCard.id === cardId) {
        this.selectedBankCard = null
        this.selectedCardIds = []
        this.selectedCard = false
        uni.showToast({
          title: '已取消选择',
          icon: 'none'
        })
      } else {
        // 选择新的银行卡，取消之前的选择
        this.selectedBankCard = item
        this.selectedCardIds = [cardId]
        this.selectedCard = true
        uni.showToast({
          title: '已选择银行卡',
          icon: 'none'
        })
      }
    },

    // 检查银行卡是否被选中
    isCardSelected(item) {
      const cardId = item.id || item.bankCardId
      return this.selectedCardIds.includes(cardId)
    },
    // 上传凭证
    uploadVoucher() {
      const remainingCount = 9 - this.uploadedVouchers.length
      if (remainingCount <= 0) {
        uni.showToast({
          title: '最多只能上传9张图片',
          icon: 'none'
        })
        return
      }

      uni.chooseImage({
        count: remainingCount,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 将新选择的图片添加到数组中
          this.uploadedVouchers.push(...res.tempFilePaths)
          // 显示上传进度
          uni.showLoading({
            title: '上传中...'
          })
          const uploadPromises = res.tempFiles.map(fileItem => {
            const fileSuffix = fileItem.name ? `${fileItem.name.split('.').pop()}` : `${fileItem.path.split('.').pop()}` // 文件后缀名
            let OssParams = {
              filePath: fileItem.path,
              dir: config.ossConfig.ossVoucherAddress,
              ext: fileSuffix
            }
            // #ifdef H5
            OssParams.filePath = fileItem
            // #endif
            return uploadToOss(OssParams).then(uploadRes => {
              console.log(333333, 'oss上传成功', uploadRes);
              return {
                dataClassify: 'other',
                filePath: uploadRes.key,
                storageMethod: 'oss'
              }
            })
          })
          Promise.all(uploadPromises)
            .then((uploadFileList) => {
              uni.hideLoading()
              this.uploadVoucher2(uploadFileList)
            })
            .catch((e) => {
              console.error('OSS 上传失败', e)
              uni.hideLoading()
              uni.showToast({
                title: '上传失败，请重试',
                icon: 'none'
              })
            })

        },
        fail: () => {
          uni.showToast({
            title: '上传失败',
            icon: 'none'
          })
        }
      })
    },
    uploadVoucher2(itemList) {
      let params = {
        list: itemList,
        groupId: this.accessoryGroupId || ''
      }
      this.accessoryGroupFileList = itemList
      this.$http.post('/accessory/uploadBatch', JSON.stringify(params)).then(res => {
        this.accessoryGroupId = res.data
      })
    },
    // 预览图片
    previewImage(index) {
      if (this.uploadedVouchers.length > 0) {
        uni.previewImage({
          urls: this.uploadedVouchers,
          current: this.uploadedVouchers[index]
        })
      }
    },
    // 删除凭证
    deleteVoucher(index) {
      uni.showModal({
        title: '确认删除',
        content: '是否删除已上传的凭证图片？',
        success: (res) => {
          if (res.confirm) {
            this.uploadedVouchers.splice(index, 1)
            // this.accessoryGroupFileList.splice(index, 1)
            this.deleteVoucher2(index)
            uni.showToast({
              title: '已删除',
              icon: 'success'
            })


          }
        }
      })
    },
    deleteVoucher2(index) {
      console.log(555555, '删除凭证', index, this.accessoryGroupFileList);
      this.$http.post('/accessory/delAccessory', {
        groupId: this.accessoryGroupId,
        filePath: this.accessoryGroupFileList[index].filePath
      }).then(res => {
        console.log(444444, '删除凭证', res);
      })
    },
    // 选择产品
    selectProduct() {
      uni.showActionSheet({
        itemList: ['黄金', '白银'],
        success: (res) => {
          const products = ['黄金', '白银']
          this.selectedProduct = products[res.tapIndex]
          this.getRealTimePrice()
        }
      })
    },
    // 入料单价输入处理
    onMaterialPriceInput(e) {
      this.materialWeight = e.detail.value
    },
    // 提交表单
    submitForm() {
      // 入款
      if (this.activeTab === 'deposit') {
        if (!this.depositAmount || Number(this.depositAmount) <= 0) {
          uni.showToast({
            title: '请输入入款金额',
            icon: 'none'
          })
          return
        }
        // 入款单次不超过：1,000,000元
        if (Number(this.depositAmount) > 1000000) {
          uni.showToast({
            title: '入款单次不超过：1,000,000元',
            icon: 'none'
          })
          return
        }
        if (!this.selectedBankCard) {
          uni.showToast({
            title: '请选择银行卡',
            icon: 'none'
          })
          return
        }
        if (this.uploadedVouchers.length === 0) {
          uni.showToast({
            title: '请先上传凭证',
            icon: 'none'
          })
          return
        }

        this.showConfirm = true
        this.confirmOrderInfo.amount = this.depositAmount
        this.confirmOrderInfo.bankCardNo = this.selectedBankCard.bankCardNo

      } else {
        // 入料
        if (!this.materialWeight || Number(this.materialWeight) <= 0) {
          uni.showToast({
            title: '请输入入料克重',
            icon: 'none'
          })
          return
        }
        // 入料、回料克重最小10g,最大1000000g
        if (Number(this.materialWeight) < 10 || Number(this.materialWeight) > 1000000) {
          uni.showToast({
            title: '入料克重最小10g,最大1,000,000g',
            icon: 'none'
          })
          return
        }
        if (this.uploadedVouchers.length === 0) {
          uni.showToast({
            title: '请先上传凭证',
            icon: 'none'
          })
          return
        }
        this.showMaterialConfirm = true
        this.confirmOrderInfo = {
          materialType: this.selectedProduct === '黄金' ? 'GOLD' : 'SILVER',
          weight: this.materialWeight,
          price: this.materialPrice,
          totalAmount: this.totalPrice
        }

      }
    },
    hideConfirmDialog() {
      console.log('取消入款');

      this.showConfirm = false
      this.confirmOrderInfo = {}
    },
    handleConfirmOrder() {
      this.hideConfirmDialog()
      this.submitDeposit()
    },
    // 提交入款
    submitDeposit() {
      let formData = {
        amount: this.depositAmount,
        bankCardId: this.selectedBankCard.id,
        tradeType: this.RECHARGE,
        accessoryGroupId: this.accessoryGroupId
      }
      this.$http.post('/applet/customer/capital/capitalChange', formData).then(res => {
        uni.showToast({
          title: '入款申请提交成功，请等待审核！',
          icon: 'none'
        })
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      })
    },
    hideMaterialConfirmDialog() {
      console.log('取消入料');
      this.showMaterialConfirm = false
      this.confirmOrderInfo = {}
    },
    handleConfirmMaterial() {
      this.hideMaterialConfirmDialog()
      this.submitMaterial()
    },
    // 提交入料
    submitMaterial() {
      let formData = {}
      const cusId = uni.getStorageSync('customerInfo').id
      formData.cusId = cusId
      formData.materialType = this.selectedProduct === '黄金' ? 'GOLD' : 'SILVER'
      formData.price = this.realTimePrice.price // 入料单价
      formData.weight = this.materialWeight // 入料克重
      formData.totalAmount = this.totalPrice // 入料总价
      formData.tradeTime = this.$moment() // 当前时间
      formData.accessoryGroupId = this.accessoryGroupId // 凭证id
      this.$http.post('/applet/customer/capital/saveMaterial', formData).then(res => {
        uni.showToast({
          title: '入料申请提交成功，请等待审核！',
          icon: 'none'
        })
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/uni.scss';

.deposit-container {
  min-height: 100vh;
  background-color: #F5F5F6;
  padding-bottom: 120rpx;
  transition: all 0.3s ease;
}

/* 键盘弹出时的样式调整 */
.deposit-container.keyboard-active {
  padding-bottom: 20rpx;
  /* 确保内容可以滚动 */
  overflow-y: auto;
  height: calc(100vh - 120rpx);
}

/* 标签页 */
.tab-section-deposit {
  background-color: #ffffff;
  padding: 20rpx 26rpx;
  border-bottom: 2rpx solid #EEEEEE;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 26rpx;
  border-radius: 16rpx;
}

.tab-container {
  display: flex;
  background-color: #F5F5F6;
  border-radius: 12rpx;
  padding: 4rpx;
  margin-bottom: 20rpx;
}

.tab-item {
  padding: 10rpx 40rpx;
  text-align: center;
  border-radius: 8rpx;
  transition: all 0.3s ease;
}

.tab-item.active {
  background-color: #ffffff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.tab-text {
  font-size: 28rpx;
  color: #666666;
  transition: color 0.3s ease;
}

.tab-item.active .tab-text {
  color: #333333;
  font-weight: bold;
}

.pre-deposit-info {
  text-align: right;
}

.pre-deposit-text {
  font-size: 28rpx;
  color: #0B1F20;
}

/* 标签页内容 */
.tab-content {
  padding: 20rpx 26rpx;
}

/* 金额输入区域 */
.amount-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .deposit-tip {
    background-color: #fff3e0;
    border-radius: 12rpx;
    padding: 20rpx;

    .tip-text {
      font-size: 24rpx;
      color: #e65100;
    }
  }
}

.amount-input-container {
  display: flex;
  align-items: center;
  padding: 40rpx 0;
  border-bottom: 2rpx solid #EEEEEE;
  margin-bottom: 20rpx;
}

.currency-symbol {
  font-size: 48rpx;
  color: #d4af37;
  margin-right: 20rpx;
}

.amount-input {
  flex: 1;
  font-size: 48rpx;
  color: #d4af37;
  border: none;
  background: transparent;
  /* 防止输入框被键盘挤压 */
  min-height: 60rpx;
  line-height: 60rpx;
}

/* 账户信息区域 */
.account-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 40rpx;
}

.section-header {
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 28rpx;
  color: #0B1F20;
}

.collapse-btn {
  display: flex;

  .collapse-text {
    font-size: 28rpx;
    color: #999999;
  }

  .collapse-arrow {
    width: 36rpx;
    height: 36rpx;
  }
}


.account-info {
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .account-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.account-details {
  flex: 1;
}

.account-text {
  font-size: 28rpx;
  color: #0B1F20;
}

.account-bank-name {
  padding-left: 20rpx;
}

.account-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  background-color: #f8f8f8;
}

.action-text {
  font-size: 24rpx;
  color: #666666;
}

.collapse-arrow {
  font-size: 20rpx;
  color: #666666;
  transition: transform 0.3s ease;
  width: 36rpx;
  height: 36rpx;
}

.collapse-arrow.collapsed {
  transform: rotate(180deg);
}

.copy-btn {
  background-color: #d4af37;
}

.copy-btn .action-text {
  color: #ffffff;
}

/* 银行卡区域 */
.bank-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

/* scroll-view样式 */
.bank-card-container {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  /* 确保scroll-view可以正常滚动 */
  -webkit-overflow-scrolling: touch;
  /* 隐藏滚动条 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 确保内容可以横向排列 */
  display: block;
}

.bank-card-container::-webkit-scrollbar {
  display: none;
}

.bank-card {
  display: inline-block;
  // width: 280rpx;
  width: calc(100% - 100rpx);
  padding: 30rpx 20rpx 40rpx 20rpx;
  background: linear-gradient(135deg, #d5b273 0%, #edce87 100%);
  border-radius: 12rpx;
  position: relative;
  margin-right: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  vertical-align: top;
  /* 确保卡片不会被压缩 */
  flex-shrink: 0;
}

.bank-card:last-child {
  margin-right: 0;
}

.bank-card:active {
  transform: scale(0.98);
}

.card-top {
  display: flex;
  align-items: center;
  padding-bottom: 40rpx;
}

.card-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.bank-logo {
  width: 100rpx;
  height: 100rpx;
  background-color: #eadbb4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.logo-text {
  font-size: 24rpx;
  color: #ffffff;
  font-weight: bold;
}

.bank-info {
  display: flex;
  flex-direction: column;
}

.bank-name {
  font-size: 28rpx;
  color: #ffffff;
  letter-spacing: 2rpx;
  margin-bottom: 20rpx;
}

.card-type {
  font-size: 24rpx;
  color: #ffffff;
  letter-spacing: 2rpx;
}

.card-center {
  flex: 1;
  display: flex;
  color: #ffffff;
}

.card-number {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.last-digits {
  font-size: 28rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  padding-left: 80rpx;
}

.card-right {
  margin-left: 20rpx;
}

.card-checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ffffff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: all 0.3s ease;
}

.card-checkbox.checked {
  background-color: #d4af37;
}

.checkbox-text {
  font-size: 24rpx;
  color: #ffffff;
  font-weight: bold;
}

/* 备用勾选图标样式 */
.card-checkbox.checked::after {
  content: '';
  width: 18rpx;
  height: 10rpx;
  border: 2rpx solid #ffffff;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  margin-top: -6rpx;
}

/* 上传区域 */
.upload-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.upload-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  min-height: 200rpx;
  width: 100%;
}

.voucher-item {
  position: relative;
  width: 100%;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #f5f5f5;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.voucher-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  object-fit: cover;
}

.voucher-delete {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.delete-icon {
  color: #ffffff;
  font-size: 24rpx;
  font-weight: bold;
}

.upload-area {
  width: 100%;
  height: 200rpx;
  border: 2rpx dashed #d4af37;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F5F5F6;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.upload-area:active {
  background-color: #e8e8e8;
  transform: scale(0.98);
}

.upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.icon-plus {
  font-size: 40rpx;
  color: #d4af37;
}

.upload-text {
  font-size: 24rpx;
  color: #d4af37;
  text-align: center;
  line-height: 1.2;
}

/* 营业时间 */
.business-hours {
  text-align: center;
  padding: 20rpx 0;
}

.hours-text {
  font-size: 24rpx;
  color: #999999;
}

/* 入料页面特有样式 */
.material-container {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .material-icon {
    padding: 40rpx 0;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #EEEEEE;
    margin-bottom: 20rpx;

    image {
      width: 50rpx;
      height: 50rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;
    }
  }


  .material-tip {
    background-color: #fff3e0;
    border-radius: 12rpx;
    padding: 20rpx;

    .tip-text {
      font-size: 24rpx;
      color: #e65100;
    }
  }


}


.product-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
}

.form-label {
  font-size: 28rpx;
  color: #0B1F20;
}

.form-value {
  display: flex;
  align-items: center;
}

.value-text {
  font-size: 28rpx;
  color: #0B1F20;
}

.value-arrow {
  width: 28rpx;
  height: 28rpx;
}

.form-input {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  color: #333333;
  border: none;
  background: transparent;
}

.total-value {
  font-size: 28rpx;
  color: #0B1F20;
}

/* 底部按钮 */
.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #f0f0f0;
  transition: all 0.3s ease;
  z-index: 999;
}

/* 键盘弹出时底部按钮样式 */
.bottom-button.keyboard-active {
  position: relative;
  margin-top: 20rpx;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
  border-radius: 12rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.submit-btn.disabled {
  background: #cccccc;
}

.submit-text {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
}

.submit-btn.disabled .submit-text {
  color: #999999;
}

.add-bank-card {
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background-color: #d4af37;
  border-radius: 50%;
  padding: 4rpx;
}
</style>
